70 行代码在 Vue3 中实现网格布局拖放排序

<script setup lang="ts">
  import { reactive, ref, TransitionGroup } from "vue";

  // 模拟一个列表
  const drags = ref([1, 2, 3, 4, 5, 6]);

  // 拖拽时新旧位置的索引
  const dragIndex = reactive({
    old: -1,
    new: -1,
  });

  // 开始拖拽，记录被拖拽的节点索引
  function onDragstart(index: number) {
    dragIndex.old = index;
  }

  // 拖拽到有效目标上时，记录有效目标的索引
  function onDragover(index: number) {
    dragIndex.new = index;
  }

  // 进行放置的事件
  function onDrop() {
    // 仅当拖放到新的位置时，切换新旧节点位置
    if (dragIndex.old !== dragIndex.new) {
      const changeItem = drags.value.splice(dragIndex.old, 1)[0];
      drags.value.splice(dragIndex.new, 0, changeItem);
    }
  }
</script>
<template>
  <!-- 增加过渡特效 -->
  <TransitionGroup class="root" name="flip-list" tag="div">
    <div
      v-for="(item, i) in drags"
      :key="item"
      class="child"
      draggable="true"
      @dragstart="onDragstart(i)"
      @dragover.prevent="onDragover(i)"
      @drop="onDrop"
    >
      {{ item }}
    </div>
  </TransitionGroup>
</template>
<style scoped>
  .root {
    margin: 10px;
    padding: 10px;
    border: 3px solid #eee;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, 200px);
  }

  .child {
    height: 200px;
    font-size: 100px;
    background-color: #eee;
    cursor: move;
  }

  .flip-list-move {
    transition: transform 0.8s ease;
  }
</style>

@dragstart="onDragstart(i)"
@dragover.prevent="onDragover(i)"
@drop="onDrop"